<template>
	<div class="content">
		<div class="content_title">
			<p>请假申请</p>
		</div>
		<div class="content_bottom">
			<li v-for="(item,index) in dataList.allLeaveList" class="content_bottom_item">
				<img class="content_bottom_item_img" :src="item.photoUrl" alt="">
				<div class="content_bottom_item_text">
					<p class="snp1">{{item.trainingName}}</p>
					<span>{{item.trainingStartTime}} - {{item.trainingEndTime}}</span>
					<div class="content_bottom_item_text_btn">
						<button @click="openBox('leave',item.trainingUuid)" class="btnS">请假</button>
						<button @click="openBox('leaveL',item.trainingUuid)">请假列表</button>
					</div>
				</div>
			</li>
		</div>
		<el-dialog v-model="dataList.leave" :show-close="false" width="408px" :close-on-click-modal="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<h4>请假</h4>
					<img src="../../assets/apply/close.png" alt="" @click="openBox('leave')">
				</div>
			</template>
			<div class="my_content">
				<span>
					实行班委负责制，严格考勤纪律，每天上课前扫码签到，班委负责统计签到结果。
				</span>
				<span>
					学员因病、因事等原因不能正常上课，均须先向班委请假，班委汇报给班主任批准后，在本平台提交请假手续。
				</span>
				<li>
					<p>请假类型：</p>
					<!-- <input type="text" placeholder="请输入请假类型"> -->
					<el-select v-model="dataList.leaveType" placeholder="请选择请假类型" clearable>
						<el-option label="病假" value="病假" />
						<el-option label="事假" value="事假" />
					</el-select>
				</li>
				<li>
					<p>请假日期：</p>
					<el-date-picker v-model="dataList.leaveDate" value-format="YYYY-MM-DD" type="date" placeholder="请假日期" size="default" />
					<!-- <input type="text" placeholder="请输入请假时间"> -->
				</li>
				<li>
					<p>请假时间段：</p>
					<el-select v-model="dataList.leaveTimeType" placeholder="请选择请假时间段" clearable>
						<el-option label="上午" value="morning" />
						<el-option label="下午" value="afternoon" />
						<el-option label="晚上" value="evening" />
						<el-option label="全天" value="allDay" />
					</el-select>
				</li>
				<li>
					<p>请假事由：</p>
					<textarea placeholder="请输入请假事由" v-model="dataList.leaveReason"></textarea>
				</li>
				<div class="box_btn">
					<button class="btnS" @click="submitLeave">提交</button>
				</div>
			</div>
		</el-dialog>
		<el-dialog v-model="dataList.leaveL" :show-close="false" width="408px" :close-on-click-modal="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<h4>请假列表</h4>
					<img src="../../assets/apply/close.png" alt="" @click="openBox('leaveL')">
				</div>
			</template>
			<div class="my_list">
				<li v-for="(item,index) in dataList.leaveList">
					<p class="title">{{item.leaveType}}</p>
					<p class="time">{{item.leaveDate}}{{item.leaveTimeTypeString}}</p>
					<div>
						<span>申请时间：{{item.createdTime}}</span>
						<span class="text1" v-if="item.approvalStatus == 'pending'">待审批</span>
						<span class="text2" v-if="item.approvalStatus == 'pass'">审批通过</span>
						<span class="text3" v-if="item.approvalStatus == 'failed'">审批拒绝</span>
					</div>
				</li>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import {saveTrainingStudentLeave,trainingList,studentLeaveList} from "../../api/home.js";
	import {reactive,onBeforeMount} from 'vue'
	const dataList = reactive({
		leave:false,
		leaveL:false,
		allLeaveList:'',
		leaveList:'',
		leaveType: '',
		leaveDate: '',
		leaveTimeType: '',
		leaveReason: '',
		trainingUuid:'',
		userinfo:''
	})
	onBeforeMount(()=> {
		getList()
		
	})
	const getList = ()=> {
		var data = {
			params: {}
		}
		trainingList(data).then(res=> {
			dataList.allLeaveList = res.data
		})
	}
	// 
	const getLeaveList = (id) => {
		var data = {
			params: {trainingUuid:id}
		}
		studentLeaveList(data).then(res=> {
			dataList.leaveList = res.data
		})
	}
	// studentLeave/studentLeaveList
	const openBox = (name,id) => {
		dataList[name] = !dataList[name]
		if(name == 'leaveL'){
			getLeaveList(id)
		}else{
			dataList.trainingUuid = id
		}
	}
	// 请假
	const submitLeave = () => {
	
	
		var data = {
			params : {
				leaveType: dataList.leaveType,
				leaveDate: dataList.leaveDate,
				leaveTimeType: dataList.leaveTimeType,
				leaveReason: dataList.leaveReason,
				trainingUuid: dataList.trainingUuid
			}
			
		}
		if(!dataList.leaveType){
			ElMessage({
				message: '请选择请假类型',
				type: 'error',
			})
			return
		}
		if(!dataList.leaveDate){
			ElMessage({
				message: '请选择请假日期',
				type: 'error',
			})
			return
		}
		if(!dataList.leaveTimeType){
			ElMessage({
				message: '请选择请假时间段',
				type: 'error',
			})
			return
		}
		if(!dataList.leaveReason){
			ElMessage({
				message: '请输入请假事由',
				type: 'error',
			})
			return
		}
		saveTrainingStudentLeave(data).then(res=> {
			if(res.code !== '500'){
				ElMessage({
					message: '提交成功',
					type: 'success',
				})
				dataList.leaveType = ''
				dataList.leaveDateStr = ''
				dataList.leaveTimeType = ''
				dataList.leaveReason = ''
				openBox('leave')
			}else{
				ElMessage({
					message: '提交失败',
					type: 'error',
				})
				return
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 910px;
		margin-left: 30px;
		&_title{
			width: 100%;
			border-bottom: 1px solid #D9D9D9;
			p{
				width: fit-content;
				font-size: 18px;
				font-weight: 600;
				color: #11918E;
				padding-bottom: 9px;
				border-bottom: 2px solid #11918E;
			}
			
		}
		&_bottom{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			&_item{
				width: 435px;
				height: 138px;
				background: #FFFFFF;
				border-radius: 10px;
				opacity: 1;
				border: 1px solid rgba(17,145,142,0.2);
				display: flex;
				padding: 15px;
				margin-bottom: 15px;
				&_img{
					width: 162px;
					height: 108px;
				}
				&_text{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 15px;
					&_btn{
						display: flex;
						justify-content: space-between;
						button{
							font-size: 16px;
							font-weight: 600;
						}
						button:last-child{
							padding: 6px 14px;
							border-radius: 5px;
							border: 1px solid #69A800;
							color: #69A800;
							background-color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	.my-header {
		position: relative;
		display: flex;
		justify-content: center;
	
		h4 {
			font-size: 26px;
			font-weight: 600;
			color: #11918E;
		}
	
		img {
			position: absolute;
			right: 0;
			top: 5px;
			width: 35px;
			height: 35px;
		}
	}
	
	.my_content {
		span {
			text-indent: 2em;
			display: block;
			font-size: 16px;
			font-weight: 400;
			line-height: 25px;
			color: #333333;
		}
	
		li {
			display: flex;
			align-items: flex-start;
			margin-bottom: 15px;
	
			// justify-content: space-between;
			p {
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				margin-top: 10px;
				width: 100px;
			}
	
			input,
			textarea {
				border: none;
				outline: medium;
				background-color: #11918E;
				padding: 12px;
				width: 260px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}
	
			textarea {
				height: 130px;
			}
	
			:deep(.el-input__wrapper) {
				background-color: #11918E;
				padding: 3px 12px;
				width: 260px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}
		}
	
		.box_btn {
			display: flex;
			justify-content: center;
	
			button {
				padding: 6px 60px;
			}
		}
	
	
	}
	.my_list{
		li{
			width: 358px;
			height: 118px;
			background: #FFFFFF;
			border-radius: 10px;
			opacity: 1;
			padding: 15px;
			border: 1px solid rgba(17,145,142,0.2);
			margin-bottom: 15px;
			.title{
				font-size: 22px;
				font-weight: 600;
				color: #333333;
			}
			.time{
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				margin: 10px 0;
			}
			div{
				display: flex;
				justify-content: space-between;
				span{
					font-size: 14px;
				}
				.text1{
					color: #FAA200;
				}
				.text2{
					color: #11918E;
				}
				.text3{
					color: #D41914;
				}
			}
		}
		
	}
</style> 